<template>
  <!-- 档案出库 -->
  <div>
    <el-card class="box-card" :body-style="{ padding: 10 }">
      <el-form :inline="true" :model="queryParam" class="demo-form-inline" size="medium">
        <el-form-item label="档号/题名">
          <el-input v-model="queryParam.archiveNoOrName" placeholder="请输入档号或题名" clearable></el-input>
        </el-form-item>
        <el-form-item label="上架状态">
          <el-select v-model="queryParam.stageStatus" placeholder="请选择" clearable>
            <el-option v-for="item in [
              { value: 1, label: '已上架' },
              { value: 2, label: '已下架' },
            ]" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="rest">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-badge :value="selectionData.length" class="item">
            <el-button type="primary" @click="handleAdd">添加到出库列表</el-button>
          </el-badge>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card" :body-style="{ padding: 10 }">
      <el-table :data="tableData" border style="width: 100%" height="55vh" ref="table"
        @selection-change="selectionChange" :row-key="getRoeKey">
        <el-table-column type="selection" width="55" align="center" sortable :reserve-selection="true">
        </el-table-column>
        <el-table-column v-for="item of tableProps" :key="item.props" :prop="item.prop" :label="item.title"
          :width="item.width">
          <template #default="scope">
            <span v-if="item.prop === 'boxNo'">
              <el-link v-if="scope.row.boxNo" type="primary" :underline="false" style="font-size: 12px"
                @click="archivesByBoxNo(scope.row)">
                {{ scope.row[item.prop] }}
              </el-link>
              <span v-else>无</span>
            </span>
            <span v-else-if="item.prop === 'stageStatus'">
              <el-tag v-if="scope.row.stageStatus == 0">未上架</el-tag>
              <el-tag v-if="scope.row.stageStatus == 1" type="success">已上架</el-tag>
              <el-tag v-if="scope.row.stageStatus == 2" type="danger">已下架</el-tag>
            </span>
            <span v-else>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card class="box-card" :body-style="{ padding: 10 }">
      <pagination ref="pagination" :totalCount="totalCount" @pagination="pagination"></pagination>
    </el-card>
    <archives-out-dialog ref="archivesOutDialog" @ok="loadData" @clearSelection="clearSelection"></archives-out-dialog>
    <archives-by-box-no ref="archivesByBoxNo"></archives-by-box-no>
  </div>
</template>

<script>
import { archivesOutPage } from '@/api/rfid/label'
import archivesOutDialog from './dialog/archivesOutDialog.vue'
import archivesByBoxNo from './dialog/archivesByBoxNo.vue'
export default {
  name: 'archivesOut',
  components: { archivesOutDialog, archivesByBoxNo },
  data() {
    return {
      totalCount: 0, //总数
      //查询条件
      searchModel: {
        pageNo: 1,
        pageSize: 10,
      },
      queryParam: {},
      upDate: [],
      tableData: [],
      tableProps: [
        { title: '档号', prop: 'archiveNo', width: '', checked: true },
        { title: '题名', prop: 'archiveName', width: '', checked: true },
        { title: '盒号', prop: 'boxNo', width: '', checked: true },
        { title: 'RFID', prop: 'rfid', width: '', checked: true },
        { title: '存放位置', prop: 'positionId_dictText', width: '', checked: true },
        { title: '上架状态', prop: 'stageStatus', width: '', checked: true },
      ],
      selectionData: [],
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    onSubmit() {
      this.$refs.pagination.resetPagination()
    },
    rest() {
      this.queryParam = {}
      this.$refs.pagination.resetPagination()
    },
    handleAdd() {
      if (this.selectionData.length === 0) {
        this.$message.warning('请选择要出库的档案')
        return
      }
      // 已下架和已上架的不能同时出库
      if (
        this.selectionData.some((item) => item.stageStatus === 2) &&
        this.selectionData.some((item) => item.stageStatus === 1)
      ) {
        this.$message.warning('已下架和已上架的不能同时出库')
        return
      }
      this.$refs.archivesOutDialog.add(this.selectionData)
    },
    selectionChange(val) {
      this.selectionData = val
    },
    clearSelection() {
      this.$nextTick(() => {
        if (this.$refs.table) {
          this.$refs.table.clearSelection()
        }
      })
    },
    getRoeKey(row) {
      // 跨页多选
      return row.labelId
    },

    loadData() {
      const param = Object.assign(this.queryParam, this.searchModel)
      archivesOutPage(param)
        .then((res) => {
          if (res.data.code === 200) {
            this.tableData = res.data.data.records
            this.totalCount = res.data.data.total
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    pagination(val) {
      this.searchModel.pageNo = val.page
      this.searchModel.pageSize = val.limit
      this.loadData()
    },
    archivesByBoxNo(row) {
      this.$refs.archivesByBoxNo.init(row)
    },
  },
}
</script>

<style scoped lang="less">
.el-table__header-wrapper {
  overflow: unset !important;
}

.demo-form-inline {
  .el-form-item {
    margin-bottom: 0;
  }
}
</style>
